<template>
    <div class="project-detail-view">
        <el-page-header @back="goBack" class="page-header">
            <div slot="content" class="page-header-content">
                项目1
            </div>
        </el-page-header>
        <el-row>
            <el-col :span="16" class="version-box">
                <div class="btn-group">
                    <el-button type="primary" size="mini" icon="el-icon-plus" round class="btn-add-version">添加版本</el-button>
                </div>
                <el-timeline :reverse="false" class="version-timeline">
                    <el-timeline-item
                            v-for="(version, index) in versions"
                            :key="index" placement="top"
                            :timestamp="version.update_time">
                        <el-button icon="el-icon-close" plain type="danger" class="btn-delete" circle size="mini"></el-button>
                        <el-card class="version-item">
                            <el-row>
                                <el-col :span="18">
                                    <div class="version-name">{{version.name}}</div>
                                    <div class="version-handler">{{version.handler}}</div>
                                    <div class="version-no">{{version.version}}</div>
                                </el-col>
                                <el-col :span="6">
                                    <el-button icon="el-icon-edit" class="btn-edit" circle size="mini"></el-button>
                                </el-col>
                            </el-row>
                        </el-card>
                    </el-timeline-item>
                </el-timeline>
            </el-col>
            <el-col :offset="2" :span="6" class="role-box">
                <div v-for="(role, index) in rolesAndPersons" :key="index">
                    <el-divider content-position="left">
                        <span>{{role.name}}</span>
                        <el-button icon="el-icon-close" plain type="danger" class="btn-delete" circle size="mini"></el-button>
                    </el-divider>
                    <div v-for="(person, personIndex) in role.persons" :key="personIndex" class="person-item">
                        <el-button icon="el-icon-close" plain type="danger" class="btn-delete" circle size="mini"></el-button>
                        <el-card>
                            <span>{{person.name}}</span>
                            <el-button icon="el-icon-edit" class="btn-edit" circle size="mini"></el-button>
                        </el-card>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<script>
    export default {
        name: 'ProjectDetail',
        data() {
            return {
                versions: [{
                    id: '',
                    name: '版本1',
                    desc: '地铁项目',
                    type: 1,
                    version: '',
                    update_time: '2019-01-01 00:00:00',
                    handler: '李维民'
                }, {
                    id: '',
                    name: '版本1',
                    desc: '地铁项目',
                    type: 1,
                    version: '',
                    update_time: '2019-01-01 00:01:00',
                    handler: '李维民'
                },{
                    id: '',
                    name: '版本1',
                    desc: '地铁项目',
                    type: 1,
                    version: '',
                    update_time: '2019-01-01 00:02:00',
                    handler: '李维民'
                },{
                    id: '',
                    name: '版本1',
                    desc: '地铁项目',
                    type: 1,
                    version: '',
                    update_time: '2019-01-01 00:03:00',
                    handler: '李维民'
                },{
                    id: '',
                    name: '版本1',
                    desc: '地铁项目',
                    type: 1,
                    version: '',
                    update_time: '2019-01-01 00:04:00',
                    handler: '李维民'
                },{
                    id: '',
                    name: '版本1',
                    desc: '地铁项目',
                    type: 1,
                    version: '',
                    update_time: '2019-01-01 00:05:00',
                    handler: '李维民'
                }
                ],
                rolesAndPersons: [{
                    id: '',
                    name: '都尉',
                    persons: [{
                        id: '',
                        name: '张小敬'
                    }]
                }, {
                    id: '',
                    name: '司丞',
                    persons: [{
                        id: '',
                        name: '李必'
                    }]
                }]
            }
        },
        methods: {
            goBack(){
                this.$router.back();
            }
        }
    }
</script>
<style lang="scss" scoped>
    .project-detail-view{

        .page-header{
            margin: 0.1rem 0;

            .page-header-content{
                font-size: 0.16rem;
            }
        }

        .version-box{
            .btn-group{
                text-align: left;
            }
            .version-timeline{
                margin-top: 0.2rem;

                .btn-delete{
                    display: flex;
                    position: relative;
                    right: 0.2rem;
                    top: -0.1rem;
                    margin: auto;
                    float: right;
                }
                .btn-edit{
                    float: right;
                }
            }
        }

        .role-box{
            span{
                margin-left: 0.1rem;
                margin-right: 0.1rem;
            }

            .person-item{
                .btn-delete{
                    display: flex;
                    position: relative;
                    right: 0.2rem;
                    top: -0.1rem;
                    margin: auto;
                    float: right;
                }
                .btn-edit{
                    float: right;
                }
            }
        }

        .btn-delete{
            width: 0.3rem;
            height: 0.3rem;
        }

        .btn-edit{
            width: 0.3rem;
            height: 0.3rem;
        }
    }
</style>
